<template>
  <Modal class="com-modal-keyboard">
    <div class="com-keyboard">
      <header>
        <i class="close" @click="$emit('close')"></i>
        {{notPassword ? config.title : title}}
      </header>
      <div class="main-body">
        <div class="loading" v-if="loading">
          <div class="img">
            <img src="~assets/img/pay_logo.png" >
          </div>
          <span>校验中...</span>
        </div>
        <div class="input-box">
          <div class="title">{{notPassword ? config.label : label}}</div>
          <div class="input">
            <span :class="{'on':i<=input.length}" v-for="i in passwordLength" :key="i"></span>
          </div>
          <div class="error-tip" v-if="config.error">{{config.error}}</div>
          <slot name="extend"></slot>
        </div>
        <div class="keyboard">
          <div class="key">
            <a class="key-item" v-for="i in keyArr" :key="i" @touchstart="add(i)">{{i}}</a>
            <span class="key-item"  @click="$emit('close')"><i class="hide"></i></span>
          </div>
          <div class="action">
            <div class="del" @touchstart="sub"><i></i></div>
            <div class="done" :class="{'on':input.length == passwordLength}" @touchstart="done">{{okText}}</div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import Modal from '~/components/Modal'
export default {
  components:{
    Modal,
  },
  props:{
    title:{
      type:String,
      default:'',
    },
    label:{
      type:String,
      default:''
    },
    okText:{
      type:String,
      default:'确定'
    },
    type:{ //接口类型，默认是个人转账
      type:String,
      default:"accept_pay"
    },
    params:{ // 接口除密码外，需要的参数
      type:Object,
      default:()=>({}),
    },
    fieldname:{// 需要穿的password的key值
      String:String,
      default:"pay_password",
    },
    checkHasPwd:{
      type:Boolean,
      default:true,
    }
    // loading:{
    //   type:Boolean,
    //   default:false,
    // }
  },
  data(){
    return {
      notPassword:false,
      loading:false,
      input:[],
      passwordLength:6,
      selected:'',
      keyArr:['1','2','3','4','5','6','7','8','9','.','0'],

      //设置密码时用到
      config:{
        title:'设置支付密码',
        label:'为了确保账户安全，请设置支付密码',
        input1:'', //第一次输入的密码,
        input2:'',  // 第二次输入的密码，
        error:''
      }
    }
  },
  async mounted(){
    if(this.checkHasPwd){
      await this.checkHasSetPassword();
    }
  },
  methods:{
    async checkHasSetPassword(){
      try{
        this.loading = true;
        let {data:rs} = await this.$axios.post('?ct=api&ac=need_and_has_pay_pwd');
        if(rs.code == 0){
          if(rs.data.state == -1){ // -1表示未设置支付密码
            this.notPassword = true;
          }
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.loading = false;
    },
    async add(key){
      if(this.input.length < this.passwordLength){
       this.input.push(key);
       await this.done();
      }
    },
    sub(){
      if(this.input.length>0){
        this.input = this.input.slice(0,this.input.length -1);
      }
    },
    async done(){
      if(this.input.length == this.passwordLength){
        await this.checkPassword();
      }
    },
    async checkPassword(){
      if(this.loading) return false;

      let params = Object.assign(this.params,{
        [this.fieldname]:this.input.join(''),
      });

      if(this.notPassword){ // 设置支付密码
        if(this.config.input1){
          this.config.input2 = this.input.join('');
        }else{
          this.config.input1 = this.input.join('');
        }
        if(this.config.input1 && this.config.input2 && this.config.input1 === this.config.input2){
          this.config.error = '';
          params = {
            pay_password:this.config.input1,
            repay_password:this.config.input2,
          }
        }else{
          this.config.label = '请再次输入以确认';
          if(this.config.input2 && this.config.input1 !== this.config.input2){
            this.config.error = '两次密码输入不一致，请重新输入'
          }
          this.input = [];
          return false;
        }
      }

      this.loading= true;

      let url;
      try {
        if(this.notPassword){
            url = '?ct=api&ac=set_pay_pwd';
        }else{
          switch(this.type){
            //个人转账
            case 'accept_pay':
              url = '?ct=api&ac=accept_pay';
              break;
            case 'scan_pay':
              url = '?ct=api&ac=scan_pay';
              break;
            case 'replace_pay':
              url = '?ct=api&ac=else_pay';
              break;
            case 'getout': //提现
              url = '?ct=api&ac=getout'
              break;
            case 'repayment': //还款
              url = '?ct=api&ac=repayment'
              break;
            case 'set_pay_pwd':
              url = '?ct=api&ac=set_pay_pwd';
              break;
          }
        }

        if(!url){
          this.$toast('类型错误',1000).then(()=>{
            this.loading = false;
          });
        }
        let { data: rs } = await this.$axios.post(url,params)

        if(rs.code == 0){
          if(this.notPassword){
            this.input = [];
            this.notPassword = false;
          }else{
            this.$emit('success',rs.data);
          }
        }else if(rs.code == -10114){ // 未设置支付密码
          this.$toast(rs.msg,1000).then(()=>{
            this.$router.push('/setting/payment-password');
          })
        }else if(rs.code == -10105){ // 余额不足
          this.$toast(rs.msg,1000).then(()=>{
            this.$router.push('/wealth/recharge');
          });
        }else {
          this.input = [];
          let toast = this.$toast(rs.msg);
          if(rs.code == -10122){//账号锁定的情况
            this.$emit('close')
          }
        }
      }catch(e){
        this.$error(e);
        this.$toast('请求错误')
      }
      this.loading = false;
    }
  }
}
</script>

<style lang="less" scoped>
.com-modal-keyboard {
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .com-keyboard {
    background-color:#fff;

    header {
      position:relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height:88px;
      font-size:36px;
      color:#292929;
      border-bottom:1px solid #e0e0e0;

      .close {
        position: absolute;
        left:0;
        top:0;
        padding:0 30px;
        display: block;
        width: 50px;
        height: 88px;

        &::after,
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 20px;
          height: 2px;
          background-color: #666;
        }

        &::before {
          transform: translate(-50%) rotate(45deg);
        }

        &::after {
          transform: translate(-50%) rotate(-45deg);
        }
      }
    }
    .main-body {
      position:relative;
      .loading {
        position: absolute;
        z-index:3;
        top:0;
        left:0;
        right:0;
        bottom:0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color:#fff;

        .img {
          padding:4px;
          border:2px solid @color-primary;
          border-radius: 50%;

          img {
            display: block;
            width:60px;
            height:60px;
          }
        }
        span {
          display: block;
          margin-top:10px;
          font-size:20px;
          color:#999;
        }
      }
    }
    .input-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: center;
      width:100%;
      height:358px;
      padding:50px 40px 10px;

      .title {
        margin-bottom:50px;
        max-width: 100%;
        font-size:30px;
        color:#666;
        .text-ellipsis();
      }
      .input {
        display: flex;
        width:100%;
        height:100px;
        border-radius: 10px;
        border:1px solid #e0e0e0;

        span {
          flex:1;
          display: flex;
          justify-content: center;
          align-items: center;
          & + span {
            border-left:1px solid #e0e0e0;
          }

          &.on {
            &::after {
              content:'';
              width:14px;
              height:14px;
              background-color:#333;
              border-radius: 50%;
            }
          }
        }
      }
      .error-tip {
        margin-top:40px;
        font-size:24px;
        color:rgb(240,85,33);
      }
    }

    .keyboard {
      display: flex;
      width:100%;
      height:472px;
      overflow: hidden;
      .key {
        display: flex;
        flex-wrap: wrap;
        flex:1;
        .key-item {
          display: flex;
          border-top:1px solid #e0e0e0;
          border-right:1px solid #e0e0e0;
          justify-content: center;
          align-items: center;
          color:#333;
          font-size:34px;
          width:186px;
          height:118px;

          &:active {
            background-color:#f6f6f7;
          }
        }
        .hide {
          display: block;
          width:61px;
          height: 45px;
          background-image:url('~assets/img/keyboard.png');
          background-size:100%;
        }
      }
      .action {
        width:191px;
        display: flex;
        flex-direction: column;
        .del ,.done {
          display: flex;
          justify-content: center;
          align-items: center;
          border-top:1px solid #e0e0e0;
          width:100%;
          height: 50%;
        }
        .del {
          i {
            display: block;
            width: 49px;
            height:36px;
            background-image: url('~assets/img/clear.png');
            background-size:100%;
          }
        }
        .done {
          font-size:30px;
          color:#333;
          background-color:#bec2cc;

          &.on {
            color:#fff;
            background-color:@color-primary;
          }
        }
      }
    }
  }
}
</style>
